import Component from "@glimmer/component";
import { i18n } from "discourse-i18n";
import ChatThread from "discourse/plugins/chat/discourse/models/chat-thread";

export default class ChatUploadDropZone extends Component {
  get title() {
    if (this.#isThread()) {
      return i18n("chat.upload_to_thread");
    } else {
      return i18n("chat.upload_to_channel", {
        title: this.args.model.title,
      });
    }
  }

  #isThread() {
    return this.args.model instanceof ChatThread;
  }

  <template>
    <div class="chat-upload-drop-zone">
      <div class="chat-upload-drop-zone__content">
        <div class="chat-upload-drop-zone__background">
          <svg
            width="94"
            height="90"
            viewBox="0 0 94 90"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M94 40.5591C94 69.8685 64.0686 90 40.9592 90C17.8499 90 0 83.9085 0 60.6907C0 37.4729 28.458 0 51.5674 0C74.6768 0 94 17.3413 94 40.5591Z"
              fill="#D1F0FF"
            ></path>
          </svg>
        </div>
        <div class="chat-upload-drop-zone__illustration">
          <svg
            width="106"
            height="84"
            viewBox="0 0 106 84"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              x="55.832"
              y="6.82959"
              width="45.7854"
              height="33.8408"
              transform="rotate(13.4039 55.832 6.82959)"
              fill="#D9D9D9"
            ></rect>
            <path
              d="M100.66 13.7645L61.1414 4.34705C58.6715 3.75846 56.1786 5.37298 55.59 7.84288L47.6214 41.2815C47.0102 43.8464 48.5297 46.3167 50.9996 46.9053L90.518 56.3227C92.9879 56.9113 95.5532 55.4145 96.1644 52.8496L104.133 19.4109C104.722 16.941 103.225 14.3757 100.66 13.7645ZM58.7093 41.5144C58.5961 41.9894 58.1482 42.1838 57.7682 42.0933L53.2084 41.0067C52.7334 40.8935 52.5163 40.5406 52.6295 40.0656L53.7161 35.5058C53.8067 35.1258 54.1822 34.8137 54.6572 34.9269L59.122 35.9909C59.502 36.0815 59.7915 36.552 59.7009 36.932L58.7093 41.5144ZM61.6069 29.3549C61.4938 29.8299 61.0459 30.0243 60.6659 29.9338L56.1061 28.8472C55.6311 28.734 55.414 28.3811 55.5272 27.9061L56.6138 23.3463C56.7044 22.9663 57.0799 22.6542 57.5549 22.7674L62.0197 23.8314C62.3997 23.922 62.6891 24.3925 62.5986 24.7725L61.5119 29.3323L61.6069 29.3549ZM64.5046 17.1954C64.3914 17.6704 63.9435 17.8648 63.5635 17.7743L59.0037 16.6877C58.5287 16.5745 58.3117 16.2216 58.4249 15.7466L59.5115 11.1868C59.602 10.8068 59.9776 10.4947 60.4526 10.6079L64.9174 11.6719C65.2974 11.7625 65.5868 12.233 65.4962 12.613L64.5046 17.1954ZM81.6894 46.1876C81.4857 47.0426 80.5673 47.5264 79.8073 47.3453L64.6079 43.7232C63.753 43.5195 63.2464 42.6961 63.4502 41.8411L65.6234 32.7215C65.8045 31.9615 66.6506 31.36 67.5056 31.5637L82.705 35.1858C83.4649 35.3669 84.0438 36.308 83.8627 37.068L81.6894 46.1876ZM86.036 27.9483C85.8322 28.8033 84.9138 29.2872 84.1538 29.1061L68.9544 25.484C68.0995 25.2802 67.593 24.4568 67.7967 23.6018L69.97 14.4822C70.1511 13.7222 70.9971 13.1207 71.8521 13.3245L87.0515 16.9466C87.8114 17.1277 88.3903 18.0687 88.2092 18.8287L86.036 27.9483ZM92.1479 49.483C92.0347 49.958 91.5868 50.1524 91.2068 50.0619L86.742 48.9979C86.267 48.8847 86.05 48.5318 86.1631 48.0568L87.2498 43.497C87.3403 43.117 87.8109 42.8276 88.1908 42.9181L92.7507 44.0048C93.1306 44.0953 93.4201 44.5659 93.3295 44.9458L92.2429 49.5057L92.1479 49.483ZM95.0456 37.3235C94.9324 37.7985 94.4845 37.9929 94.1045 37.9024L89.6397 36.8384C89.1647 36.7252 88.9476 36.3723 89.0608 35.8973L90.1474 31.3375C90.238 30.9575 90.6135 30.6455 91.0885 30.7586L95.5533 31.8226C95.9333 31.9132 96.2228 32.3837 96.1322 32.7637L95.0456 37.3235ZM97.9432 25.164C97.8301 25.639 97.3822 25.8334 97.0022 25.7429L92.5374 24.6789C92.0624 24.5657 91.8453 24.2128 91.9585 23.7378L93.0451 19.178C93.1357 18.798 93.5112 18.486 93.8912 18.5765L98.356 19.6405C98.736 19.731 99.0254 20.2016 98.9349 20.5816L97.8483 25.1414L97.9432 25.164Z"
              fill="#AFAFAF"
            ></path>
            <path
              d="M30.7898 24.814L27.2823 9.2672L4.41944 14.4252C2.81904 14.7863 1.95958 16.3017 2.29486 17.7878L14.2615 70.8296C14.6226 72.43 16.0236 73.3153 17.624 72.9542L56.0337 64.2887C57.5198 63.9534 58.5193 62.5266 58.1582 60.9262L49.699 23.4311L34.1523 26.9385C32.5519 27.2996 31.1508 26.4144 30.7898 24.814ZM48.719 19.0871C48.5643 18.4012 48.0666 17.7927 47.4804 17.3243L33.7501 8.64894C33.0754 8.32063 32.3121 8.13243 31.6263 8.28717L30.9404 8.44191L34.2415 23.0742L48.8738 19.773L48.719 19.0871Z"
              fill="#0AADFF"
            ></path>
            <rect
              x="41.7334"
              y="40.3967"
              width="37.6309"
              height="28.6511"
              transform="rotate(6.29289 41.7334 40.3967)"
              fill="#66CCFF"
            ></rect>
            <path
              d="M76.768 40.4721L44.4638 36.9097C42.3671 36.6785 40.548 38.2071 40.3254 40.2261L37.8591 62.5905C37.6279 64.6872 39.0788 66.4977 41.1755 66.729L73.4796 70.2913C75.4987 70.514 77.3869 69.0716 77.6181 66.9749L80.0843 44.6105C80.307 42.5915 78.787 40.6947 76.768 40.4721ZM73.4248 66.5125L42.0524 63.0529C41.7418 63.0187 41.6036 62.8462 41.6379 62.5356L44.0014 41.103C44.0271 40.8701 44.2081 40.6542 44.5187 40.6885L75.891 44.1481C76.124 44.1738 76.3312 44.4324 76.3056 44.6654L73.9421 66.098C73.9078 66.4086 73.6577 66.5382 73.4248 66.5125ZM49.9226 44.4284C48.1365 44.2314 46.6623 45.4836 46.4739 47.192C46.2769 48.978 47.4514 50.4437 49.2375 50.6407C50.9459 50.8291 52.4892 49.6631 52.6862 47.8771C52.8746 46.1687 51.631 44.6168 49.9226 44.4284ZM45.725 59.6852L70.5743 62.4255L71.2594 56.2131L65.1708 48.7036C64.8254 48.2725 64.2818 48.2126 63.8507 48.558L53.5908 56.7799L50.8186 53.4088C50.4732 52.9777 49.9296 52.9178 49.4985 53.2632L46.136 55.9578L45.725 59.6852Z"
              fill="white"
            ></path>
            <path
              d="M37.8174 63.0181L77.5892 66.862L77.012 72.8342C76.9057 73.9336 75.9283 74.7388 74.8288 74.6325L39.0385 71.1734C37.939 71.0671 37.1339 70.0897 37.2402 68.9902L37.8174 63.0181Z"
              fill="white"
            ></path>
          </svg>
        </div>
        <div class="chat-upload-drop-zone__text">
          <span class="chat-upload-drop-zone__text__title">
            {{this.title}}
          </span>
        </div>
      </div>
    </div>
  </template>
}
